<template>
  <div>
    <WithDialog
      :visible.sync="dialogVisible"
      :confirm-btn-loading="loading"
      title="入库"
      v-bind="attrs"
      @confirm="handleConfirm"
      @cancel="handleCancel"
      @close="handleClose"
    >
      <el-form
        ref="formRef"
        :model="model"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="单位" prop="unit_id">
          <el-select v-model="model.unit_id" placeholder="请选择">
            <el-option
              v-for="item in units"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="入库数量" prop="adjust_quantity">
          <el-input-number
            v-model="model.adjust_quantity"
            :min="1"
            :max="10000"
            placeholder="请输入入库数量"
            @change="quantityChange"
          />
        </el-form-item>

        <el-form-item label="入库时间" prop="adjust_time">
          <el-date-picker
            v-model="model.adjust_time"
            type="datetime"
            placeholder="选择入库时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions"
          />
        </el-form-item>

        <el-form-item label="操作人" prop="adjust_user_id">
          <el-button type="text" @click="showUserSelect = true">
            {{ currentUser ? currentUser?.label : '设置操作人，不设置默认当前用户' }}
          </el-button>
        </el-form-item>

        <el-form-item label="备注" prop="reason">
          <el-input
            v-model="model.reason"
            type="textarea"
            placeholder="请输入入库备注"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
      </el-form>
    </WithDialog>

    <UserSelect
      :visible.sync="showUserSelect"
      @confirm="handleUserSelectConfirm"
    />
  </div>
</template>
<script>
import WithDialog from '@/components/WithDialog/withDialog.vue'
import { arrayToTree, findTarget, treeToArray } from '@/utils'
import UserSelect from '@/views/officeSuppliesManagement/components/UserSelect.vue'
export default {
  name: '',
  components: {
    WithDialog,
    UserSelect
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },

    model: {
      type: Object,
      default: () => ({})
    },

    loading: {
      type: Boolean,
      default: false
    },

    goodsUnits: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      rules: {
        adjust_quantity: [
          { required: true, message: '请输入入库数量', trigger: ['change', 'blur'] }
        ],
        unit_id: [
          { required: true, message: '请选择单位', trigger: ['change', 'blur'] }
        ],
        adjust_time: [
          { required: true, message: '请选择入库时间', trigger: ['change', 'blur'] }
        ]
      },
      showUserSelect: false,
      currentUser: null,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(v) {
        this.$emit('update:visible', v)
      }
    },

    attrs() {
      const attrs = { ...this.$attrs }
      return attrs
    },

    listeners() {
      const listeners = { ...this.$listeners }
      return listeners
    },

    goodsTypeOptionsFormat() {
      const list = treeToArray(this.goodsTypeOptions)
      return arrayToTree(list, null, this.arrayToTreeFunc)
    },

    units() {
      return this.goodsUnits.map(unit => {
        return {
          label: unit?.name,
          value: unit.id
        }
      })
    }
  },

  watch: {
  },

  methods: {

    quantityChange(val) {
      if (val && this.model.unit_price) {
        this.model.total_amount = val * this.model.unit_price
      }
    },

    validate() {
      return new Promise(resolve => {
        this.$refs.formRef.validate(flag => {
          resolve(flag)
        })
      })
    },

    resetFields() {
      this.$refs.formRef.resetFields()
    },

    async handleConfirm() {
      const flag = await this.validate()
      if (!flag) return this.$message.error('请将信息填写完整')
      this.$emit('confirm')
    },

    handleCancel() {
      this.close()
    },

    close() {
      this.$emit('update:visible', false)
    },

    handleClose() {
      this.resetFields()
    },

    arrayToTreeFunc(item) {
      if (item.is_directory && !item.children) item.disabled = true
    },

    handleUserSelectConfirm(e) {
      this.model.adjust_user_id = e?.value ?? null
      this.currentUser = e
    }

  }
}
</script>
<style lang="scss" scoped>
</style>
